<template>
  <div ref="service" class="content2">
    <div class="title display-flex align-items-center justify-content-center">
      <h2 class="display-flex align-items-center justify-content-center">
        <img class="serverIcon" src="../../../assets/server.png" alt>
        <span>服务</span>
        <span>/</span>
      </h2>
      <p>我们可以为您提供什么服务？</p>
    </div>
    <div class="content2Main display-flex align-items-center justify-content-space-between">
      <div class="content2Item display-flex flex-direction-column align-items-center flex-wrap">
        <img src="../../../assets/content2Phone.png" alt>
        <p class="content2Title">移动应用设计</p>
        <p class="content2Content">根据客户需求，开发适用的Android和IOS平台适用的APP，对客服的喜好进行精确分析，给出最佳方案和设计，确保客服满意！</p>
      </div>
      <div class="content2Item display-flex flex-direction-column align-items-center">
        <img src="../../../assets/contentWechat.png" alt>
        <p class="content2Title">微信小程序</p>
        <p class="content2Content">我们针对不同的定制商，设计功能贴切的小程序，同时经过多项严格测试，保证设计质量的同时能应对不同的复杂操作环境。</p>
      </div>
      <div class="content2Item display-flex flex-direction-column align-items-center">
        <img src="../../../assets/content2Web.png" alt>
        <p class="content2Title">Web网站平台建设</p>
        <p class="content2Content">根据客户需求，开发适用的Android与IOS平台适用的APP，对客服的喜好进行精确分析，给出最佳方案和设计，确保客服满意！</p>
      </div>
    </div>
    <div class="content2Main display-flex align-items-center justify-content-space-between">
      <div class="content2Item display-flex flex-direction-column align-items-center flex-wrap">
        <div class="content2ImgOuter display-flex align-items-center justify-content-center">
          <img src="../../../assets/content2Platform.png" alt>
        </div>
        <p class="content2Title">电商平台建设</p>
        <p class="content2Content">专注研究线下开门电商如何接入线上平台的解决方案，促进增长商家的销售与服务范围与覆盖面积，扩大盈利方向。</p>
      </div>
      <div class="content2Item display-flex flex-direction-column align-items-center">
        <div class="content2ImgOuter display-flex align-items-center justify-content-center">
          <img src="../../../assets/content2Public.png" alt>
        </div>
        <p class="content2Title">微信公众号设计</p>
        <p class="content2Content">微信公众号的运营与设计，不同群体有着不同的需求，我们致力打造最贴合客户需求的公众号平台，多方位把关。</p>
      </div>
      <div class="content2Item display-flex flex-direction-column align-items-center">
        <div class="content2ImgOuter display-flex align-items-center justify-content-center">
          <img src="../../../assets/content2System.png" alt>
        </div>
        <p class="content2Title">办公管理系统设计</p>
        <p class="content2Content">不同的电商平台都有后台管理系统的集成，好的办公管理系统能带来很高的执行效率，我们专注打造办公平台3年，稳定可靠。</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Service",
  mounted: function() {
    this.$store.commit("setService", this.$refs["service"]);
  }
};
</script>
<style scoped>
.content2 {
  width: 100%;
  height: 11.8rem;
  padding-top: 0.3rem;
  color: #5b5b5b;
}

.title {
  font-size: 0.33rem;
}
.title > p {
  position: relative;
  top: 0.07rem;
}
.title > h2 > img {
  width: 0.6rem;
}
.content2Main {
  font-size: 0.25rem;
  padding: 0 2rem;
}
.content2Item {
  width: 25%;
}
.content2Item img {
  width: 2rem;
}
.content2Title {
  font-size: 0.4rem;
}
.content2Content {
  height: 2.3rem;
  margin-top: 0.5rem;
}
@media screen and (max-width: 500px) {
  .content2Item {
    width: 33%;
  }
  .content2 {
    height: 16rem;
  }
  .content2Content {
    height: 4.3rem;
  }
}
</style>
